<template>
  <div class="cart-view">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="router.back()" />
    </van-sticky>
    <!-- 商品 -->
    <div class="cart-goods" v-for="item in UserStore.CartGoods">
      <van-swipe-cell>
        <van-row :align="'center'">
          <van-col span="2">
            <van-checkbox v-model="item.choose" @change="isCheckAll"></van-checkbox>
          </van-col>
          <van-col span="6">
            <van-image width="80" :src="item.goods_thumb" />
          </van-col>
          <van-col span="16">
            <div class="cart-name">{{ item.goods_name }}</div>
            <div class="cart-desc">{{ item.goods_desc }}</div>
            <div class="price-stepper">
              <div class="cart-price">￥{{ item.price }}</div>
              <div class="cart-stepper"><van-stepper v-model="item.goods_number"
                  @change="updataNum(item.goods_id, item.goods_number)" min="1" max="10" /></div>
            </div>
          </van-col>
        </van-row>
        <van-divider />
        <!-- 左滑删除按钮 -->
        <template #right>
          <van-button square type="danger" text="删除" @click="deleteOne(item.goods_id)" style="height: 100%; width: 75px;margin-left: 4px;" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 底部操作栏 -->
    <van-submit-bar :price="priceAll" button-text="提交订单" @submit="onSubmit" class="submit-cart">
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>

      <template #tip>
        你的收货地址不支持配送
      </template>
    </van-submit-bar>
  </div>
</template>

<script setup lang="ts">
//引入
import { useUserStore } from '../../store';
import { CartGoods } from '../../types';
import { getSettlementDate, getCartData } from '../../api';
import { showToast } from 'vant';
//创建实例
const router = useRouter();
const UserStore = useUserStore();
// 获取购物车数据
UserStore.getCartGoods();
//滚动条回到0
document.documentElement.scrollTop = 0
//响应式全选
let checked = ref();

//全选方法
let checkAll = () => {
  UserStore.CartGoods.forEach((item: any) => {
    item.choose = checked.value;
  })
}
//子项来判断是否全选
let isCheckAll = () => {
  checked.value = UserStore.CartGoods.every((item: CartGoods) => item.choose == true)
}
//总价计算属性
let priceAll = computed(() => {
  let all = 0;
  UserStore.CartGoods.forEach(item => {
    if (item.choose) {
      all += item.price * parseInt(item.goods_number)
    };
  });
  return all * 100;
})
//删除单个方法
let deleteOne = async (goods_id: string) => {
  await getCartData({
    status: "delcart",
    userId: localStorage.getItem("token"),
    goodsId: goods_id
  })
  //重新获取刷新数据
  UserStore.getCartGoods();
}
//更新数量方法
let updataNum = async (goods_id: string, goods_number: string) => {
  await getCartData({
    status: "addcart",
    userId: localStorage.getItem("token"),
    goodsId: goods_id,
    goodsNumber: goods_number
  })
  UserStore.getCartGoods();
}
// 提交方法
let onSubmit = async () => {
  if(!UserStore.CartGoods.length){
    showToast('购物车为空，请先把商品加入购物车');
    return
  }
  // 把为真的item组成一个数组
  let goodsIdList = UserStore.CartGoods.filter(item => item.choose)
    .map(item => item.goods_id)
  // 用&符号连接起来
  let goodsIdString = goodsIdList.join('&');
  console.log(goodsIdString);
  // 发送订单
  await getSettlementDate({
    status: "addsettlement",
    userId: localStorage.getItem("token"),
    from: "cart",
    goodsId: goodsIdString
  })
  // 删除为真的购物车商品
  goodsIdList.forEach((item: Object) => {
    getCartData({
      status: "delcart",
      userId: localStorage.getItem("token"),
      goodsId: item
    })
  })
  //跳转到结算
  router.push("/submitOrder");
}

</script>

<style scoped>
.cart-view {
  .submit-cart {
    margin-bottom: 50px;
  }

  .cart-goods {
    width: 95%;
    margin: 10px auto 0;

    .cart-name {
      font-size: 13px;
      color: #000;
    }

    .cart-desc {
      font-size: 12px;
      color: #333;
      margin: 5px 0;
    }

    .price-stepper {
      display: flex;
      justify-content: space-between;
      color: #007AFF;
    }
  }
}
</style>
